<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>nth-tabs</title>
    <meta name="keywords" content="nth-tabs">
    <meta name="description" content="nth-tabs">
	<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
	<link href="css/nth.tabs.min.css" rel="stylesheet">
	<script src="js/nth.tabs.min.js"></script>
    <style>
    </style>
    <script>
		var nthTabs;
        $(function () {
			//一个低门槛的演示,更多需求看源码
			//基于bootstrap tab的自定义多标签的jquery实用插件，滚动条依赖jquery.scrollbar，图标依赖font-awesome
            nthTabs = $("#editor-tabs").nthTabs();
            nthTabs.addTab({
                id:'a',
                title:'孙悟空',
                content:'看我七十二变',
            }).addTab({
				/*换个姿势*/
                id:'b',
                title:'猪八戒-关不掉',
                content:'高老庄娶媳妇',
				active:true,
				allowClose:false,
            }).addTab({
                id:'c',
                title:'沙和尚',
                content:'请叫我大叔',
            }).addTab({
                id:'d',
                title:'唐僧',
                content:'光头一个',
            }).addTab({
                id:'e',
                title:'武松',
                content:'打虎猛汉',
            }).addTab({
                id:'f',
                title:'潘金莲',
                content:'求爱爱',
            }).addTab({
                id:'g',
                title:'来个标题长一点的的的来个标题长一点的的的',
                content:'你赢了',
            }).addTab({
                id:'h',
                title:'支持连贯操作',
                content:'没错就是这么爽',
            }).addTab({
                id:'i',
                title:'欢迎提意见',
                content:'一定一定',
            }).addTab({
                id:'j',
                title:'熬夜写的啊',
                content:'码农苦逼~',
            }).setActTab("#c");
        });
    </script>
</head>
<body>
<div class="container" style="margin-top: 100px;">
	<div class="row">
		<div class="col-md-12">
			<div class="nth-tabs" id="editor-tabs"></div><!--使用时只需此标签，class固定,id自定义-->
		</div>
	</div>
	<div class="row" style="margin-top:20px;">
		<div class="col-md-12" style="line-height:50px;">
			<button type="button" class="btn btn-primary" onclick="nthTabs.delTab('f')">关闭潘金莲</button>
			<button type="button" class="btn btn-primary" onclick="nthTabs.addTab({id:'bgj',title:'白骨精',content:'老白'})">添加白骨精</button>
			<button type="button" class="btn btn-primary" onclick="nthTabs.setActTab('e')">切换到武松</button>
			<button type="button" class="btn btn-primary" onclick="nthTabs.locationTab()">定位到当前选项卡</button>
			<button type="button" class="btn btn-primary" onclick="nthTabs.delOtherTab()">关闭其他</button>
			<button type="button" class="btn btn-primary" onclick="nthTabs.delAllTab()">关闭所有</button>
			<button type="button" class="btn btn-primary" onclick="$('.roll-nav-left').click()">左滑动</button>
			<button type="button" class="btn btn-primary" onclick="$('.roll-nav-right').click()">右滑动</button>
			<button type="button" class="btn btn-primary" onclick="alert(nthTabs.getMarginStep())">获取左右滑动步值</button>
			<button type="button" class="btn btn-primary" onclick="alert(nthTabs.getActiveId())">获取当前选项卡ID</button>
			<button type="button" class="btn btn-primary" onclick="alert(nthTabs.getAllTabWidth())">获取所有选项卡宽度</button>
			<button type="button" class="btn btn-primary" onclick="console.log(nthTabs.getTabList());alert(nthTabs.getTabList())">获取所有选项卡</button>
		</div>
	</div>
</div>
</body>
</html>